<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>旋转太极图</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
    <style>
        html {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        body {
            background-color: gray;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="600" height="400">
        <script type="text/javascript">
            function runTaiji(s) {
                // 可以根据自己的想要的速度传参,s越大速度越快
                let v = s / 36000;
                let i = 1;

                function fillTaiji() {
                    let c = document.getElementById("myCanvas");
                    let ctx = c.getContext("2d");
                    ctx.clearRect(0, 0, 600, 400);
                    // 此处保存原始坐标
                    ctx.save();
                    ctx.translate(300, 200);
                    ctx.rotate(((2 * Math.PI) * v) * i++);
                    if (i === 36000) {
                        i = 1;
                    }
                    //绘制左侧的白色半圆直径都是150
                    ctx.fillStyle = "#FFFFFF";
                    ctx.beginPath();
                    ctx.arc(0, 0, 150, 1.5 * Math.PI, Math.PI / 2, false);
                    ctx.closePath();
                    ctx.fill();
                    //绘制右侧的黑色半圆
                    ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(0, 0, 150, Math.PI / 2, 1.5 * Math.PI, false);
                    ctx.closePath();
                    ctx.fill();
                    //绘制下面的黑色圆
                    ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(0, 75, 75, 0, 2 * Math.PI, false);
                    ctx.closePath();
                    ctx.fill();
                    //绘制上面的白色圆
                    ctx.fillStyle = "#FFFFFF";
                    ctx.beginPath();
                    ctx.arc(0, -75, 75, 0, 2 * Math.PI, false);
                    ctx.closePath();
                    ctx.fill();
                    //绘制两个小圆
                    ctx.fillStyle = "FFFFFF";
                    ctx.beginPath();
                    ctx.arc(0, 75, 10, 0, 2 * Math.PI, false);
                    ctx.closePath();
                    ctx.fill();
                    //绘制黑色小圆
                    ctx.fillStyle = "#000";
                    ctx.beginPath();
                    ctx.arc(0, -75, 10, 0, 2 * Math.PI, false);
                    ctx.closePath();
                    ctx.fill();

                    ctx.closePath();
                    ctx.restore();
                    // 此处恢复原始坐标
                    window.requestAnimationFrame(fillTaiji)
                    // window.requestAnimationFrame() 
                    // 告诉浏览器——你希望执行一个动画，
                    // 并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
                    // 该方法需要传入一个回调函数作为参数，
                    // 该回调函数会在浏览器下一次重绘之前执行
                }
                window.requestAnimationFrame(fillTaiji)
            }
            runTaiji(200);
        </script>
</body>

</html>